<template>
  <div class="order_item"  @click="clickOrder(data)">
    <div class="shop_box" v-if="!hiddenShop&&(data.tarder&&data.tarder!=store.state.address0)"  >
      <div class="shop_name"> 
        <van-image @click.stop="openShopOrder(data)" class="shop_img" v-if="data.url" round fit="cover" :src="data.url" />
              <div @click.stop="openShopOrder(data)" v-else class="shop_img">
                {{ item.name.slice(0,1) }}
              </div>
          <span @click.stop="openShopOrder(data)">  {{ data.name }}</span>
      </div>
      <div class="shop_describe">
        {{ data.describe }}
        <!-- <span>成单量 99</span>
        <span> 成单率 100% </span> -->
      </div>
    </div>
    <div class="order_content" >
      <div class="flex_box" style="line-height: 20px;" >
      <div class="data_box"  @click.stop="openUserOrder(data)" v-if="!isMy">
        <div class="data_name">{{ t('sendUser') }} : </div>
        <!-- <div class="data_name" style="font-size: 10px;">{{ t('sendUser') }} asdasdadadasd: 2133333331233333</div> -->
        <div class="data_name">{{ splitAddress(data.owner, 8) }}   #{{ data.id }}</div>
      </div>
      <div v-else class="data_value">  #{{ data.id }}</div>
      </div>
    <div class="flex_box">
      <div class="data_box">
        <div class="data_name">{{ t("price") }}:</div>
          <div class="amount_value">{{data.truePrice }}</div> <div class="amount_name">{{ store.state.USDT}}</div>
      </div>
      <div class="data_box">
       
        <div class="data_way"> {{ data.priceType==1?'固定价格':'实价' }}</div>
        <div v-if="data.priceType==2&&data.upRate!=0" class="data_way">{{  data.rateType==1 ?' 上浮': '下浮' }} {{ (data.upRate*100) }} %</div>
        <div class="data_value">
          <statusTab type="c2c" v-if="isMy" :status="data.status"></statusTab>
        </div>
      </div>
    </div>
    <!-- 利息 -->
      <div class="flex_box">
        <div class="data_box">
          <div class="data_name">{{ t("storeAmount") }}:</div>
        <div class="data_value" style="align-items: center;" v-if="data.orderType=='2'">
          <img :src="requireImg(store.state.usdtImg)" alt="" /> 
          <div class="amount_value2">{{data.amount }} / {{ data.allAmount }}</div> <div class="amount_name"> {{ store.state.USDT}}</div>
        </div>
          <div class="data_value" style="align-items: center;" v-else>
            <img :src="requireImg(store.state.btcImg)" alt="" /> 
            <div class="amount_value2">{{ data.amount }} / {{ data.allAmount }}</div> 
             <span class="amount_name" >{{ store.state.BTC}}</span></div>
      </div>
      <div class="data_box">
        <div class="data_name">{{ t("ConfirmationTip") }}:</div>
        <div class="data_value" v-if="data.orderType==2">  
          <img :src="requireImg(store.state.usdtImg)" alt="" />{{ parseFloat((data.tip*data.allAmount).toFixed(4))    }} <span>{{ store.state.USDT}}</span>
        </div>
        <div class="data_value"  v-else>
          <img :src="requireImg(store.state.btcImg)" alt="" />{{ parseFloat((data.tip*data.allAmount).toFixed(4))    }} <span>{{ store.state.BTC}}</span>
        </div>
      </div>
      </div>
     
      <div class="flex_box">
      <div class="data_box" v-if="data.orderType=='2'&&(data.status==0 || data.status==3)">
        <div class="data_name">{{ t("aboutSell") }}:</div>
        <div class="data_value"><img :src="requireImg(store.state.btcImg)" alt="" />{{ btcAmount }} <span>{{ store.state.BTC}}</span></div>
      </div>
      <div class="data_box" v-else-if="data.orderType=='1'&&(data.status==0 || data.status==3)">
        <div class="data_name">{{  t('needBuy') }}:</div>
        <div class="data_value">
          <img :src="requireImg(store.state.usdtImg)" alt="" />
          <span>{{ usdtAmount }}</span> <span>{{ store.state.USDT}}</span>
        </div>
      </div>
      <div v-else></div>
      <div  class="order_btn" v-if="data.from==store.state.address||isMy">{{ t('detail') }}</div>
      <div class="order_btn" v-else-if="data.orderType=='2' "> {{ t('sellOrder') }}</div>
      <div class="order_btn2" v-else>  {{ t('buyOrder') }}</div>
    </div>
    </div>
  </div>
</template>
<script setup>
import { splitAddress } from "@/utils/index.js";
import { useStore } from "vuex";
import { ref, onMounted, computed, reactive } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
const router = useRouter();
const { locale, t } = useI18n();
const store = useStore();
const openShopOrder = (item) => {
  goToPage("shopOrder", item);
};
const openUserOrder = (item) => {
  goToPage("userOrder", item);
};
const requireImg = (imgPath) => {
  return new URL(`../assets/images/${imgPath}`, import.meta.url).href;
};
const btcAmount = computed(()=>{
  if(props.data.orderType==2&&props.data.status==0){
    return parseFloat((props.data.amount / props.data.truePrice).toFixed(6))
  }else{
    return props.data.amount
  }
})
const usdtAmount = computed(()=>{
  if(props.data.orderType==1&&props.data.status==0){
    return parseFloat((props.data.amount * props.data.truePrice).toFixed(6))
  }else{
    return props.data.amount
  }
})
const clickOrder = (item)=>{
  store.commit("changeOrderItem",item)
  goToPage("orderDetail2", item);
}
const yearData = computed(() => {
  return '(' + (365/  (props.data.duration)  * props.data.interestRate*100).toFixed(2) + ' % APR)'  ;
});
const goToPage = (value, item) => {
  let query = {
    tarder: item.tarder,
    owner:item.owner,
    id:item.id,
  };
  router.push({
    name: value,
    query,
  });
};
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isMy:{
    type: Boolean,
    default: false,
  },
  hiddenShop: {
    type: Boolean,
    default: false,
  },
});
</script>
<style lang="scss" scoped>
.order_item {
  border: 1px solid #999;
  margin: 10px 0;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  .shop_box {
    padding: 5px 0;
    .shop_name {
      display: flex;
      align-items: center;
      font-weight: bold;
      gap: 5px;
      .shop_img{
        width: 20px;
    height: 20px;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    color: #181E25;
    border-radius: 6px;
        background: rgb(234, 236, 239);
        
      }
    }
    .shop_describe {
      font-size: 9px;
      margin:3px 0;
      color: #999;
    }
  }

  .order_content {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 5px;
  }
  .flex_box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    line-height: 20px;
  }
  .order_btn{
    background: #2ebd85;
    border-radius: 6px;
    padding: 4px 10px;
    display: flex;
    align-items: center;
  }
  .order_btn2{
    background: #f6465d;
    border-radius: 6px;
    padding: 4px 10px;
    display: flex;
    align-items: center;
  }
  .data_box {
    gap: 6px;
    display: flex;
    align-items: center;
    .data_name {
      font-size: 11px;
    }
    .data_value {
      display: flex;
      align-items: center;
      color: #ddd;
      gap: 3px;
      img {
        height: 12px;
      }
    }
    .data_way{
      color: #888;
    }
  }
}
.amount_value{
  font-size: 20px;
  font-weight: bold;
  color: $money;
}
.amount_name{
  color: #999;
}
</style>
